<template>
	<view class="goods-list-container" :class="[configs.style,configs.bgClassName]" :style="bgStyle" @click="bgClick">
		<!-- <tian-title :title="configs.headerTitle" :underLine="configs.headerUnderLine" v-if="configs.withTitle">
		</tian-title> -->
		<!-- <view class="">
			<button type="default" @click="test">test</button>
		</view> -->
		<scroll-view :scroll-y="!!configs.scrollY" style="height: 100%;" @scrolltolower="scrolltolower">
			<unicloud-db ref="udb" v-slot:default="{data, loading, error, options,hasMore}"
				collection="tian-mall-products" @load="loadData"
				field="name,goods_summary,goods_thumb,shop_ID,last_modify_date,is_on_sale" :where="where"
				:options="configs" :page-size="configs.page_size" :orderby="orderby" style="height: 100%;">
				<view class="goods-list waterfall" v-if="options.waterfall" :class="[options.style]">
					<view class="left">
						<!-- 第一页的前2张图片高度要高一些 ，就能形成错位效果-->
						<template v-for="(item,index) in data" :key="index">
							<view class="under-line margin-left-6" :class="options.itemClassName" v-if="index%2==0">
								<!-- <tian-goods-image-cover :item="item"></tian-goods-image-cover> -->
								<image :src="item.banner_path" mode="aspectFill" class="image-width-168 goods-image"
									:style="item.style" @click.stop="navToDetail(item)" :class="options.imageClassName">
								</image>
								<view class="product-content">
									<view class="title text-2" @click.stop="navToDetail(item)">
										<text>{{item.name}}</text>
									</view>
									<view class=" font-24 color-777" v-if="item.goods_summary">
										<text>{{item.goods_summary}}</text>
									</view>
									<!-- <tian-goods-price :hasCart="item.hasCart" :hasSaleCount="item.hasSaleCount"
										:value="item" @click="openSku(item)"></tian-goods-price> -->
								</view>
							</view>
						</template>
					</view>
					<view class="right">
						<template v-for="(item,index) in data" :key="index">
							<view class="under-line " :class="options.itemClassName" v-if="index%2!=0">
								<!-- <tian-goods-image-cover :item="item"></tian-goods-image-cover> -->
								<image :src="item.banner_path" mode="aspectFill" class="image-width-168 goods-image"
									:style="item.style" @click.stop="navToDetail(item)" :class="options.imageClassName">
								</image>
								<view class="product-content">
									<view class="title text-2" @click.stop="navToDetail(item)">
										<text>{{item.name}}</text>
									</view>
									<view class=" font-24 color-777" v-if="item.goods_summary">
										<text>{{item.goods_summary}}</text>
									</view>
									<!-- <tian-goods-price :hasCart="item.hasCart" :hasSaleCount="item.hasSaleCount"
										:value="item" @click="openSku(item)"></tian-goods-price> -->
								</view>
							</view>
						</template>

					</view>
				</view>
				<!-- 列表样式 -->
				<view v-else class="goods-list" :class="[options.style]">
					<view v-for="(item,index) in data" :key="index" class="under-line goods"
						:class="options.itemClassName">
						<!-- <tian-goods-image-cover :item="item"></tian-goods-image-cover> -->
						<image :src="item.banner_path" mode="aspectFill" class="image-width-168 goods-image"
							:style="item.style" @click.stop="navToDetail(item)" :class="options.imageClassName"></image>
						<view class="goods-content">
							<view class="title " @click.stop="navToDetail(item)">
								<text class="text-2">{{item.name}}</text>
							</view>
							<view class="desc colorGray" v-if="item.goods_summary">
								<text>{{item.goods_summary}}</text>
							</view>
							<!-- <view class="miaosha-process ti-flex"
								v-if="options.showMiaosha && item.miaosha && item.miaosha.is_begin">
								<progress activeColor="#ff3b00" :active="true" class="progress-box"
									:percent="item.miaosha.progress"></progress>
								<text class="colorGray margin-left-30 font-24">已售{{item.miaosha.progress}}%</text>
							</view> -->
							<!-- <tian-goods-price :hasCart="item.hasCart" :showListMiaosha="options.showMiaosha"
								:hasSaleCount="item.hasSaleCount" :value="item" @click="openSku(item)">
							</tian-goods-price> -->
						</view>
					</view>
				</view>
				<tian-empty v-if="!loading && data.length == 0" text="暂无数据" marginTop="200"></tian-empty>
				<uni-load-more v-else-if="options.loading" status="loading">
				</uni-load-more>
				<uni-load-more v-else-if="options.loadmore" :status="loading?'loading':(hasMore ? 'more' : 'noMore')">
				</uni-load-more>
			</unicloud-db>
			<!-- <tian-goods-sku v-if="withSku" :value="goods" ref="tianSkuPop"></tian-goods-sku> -->
		</scroll-view>
	</view>
</template>
<script>
	/**
	 * 商品列表，
	 * 左图右文字，两图，一大图
	 * @param {String} category_id 分类id
	 */
	export default {
		data() {
			return {
				isItemClick: false,
				bgStyle: "",
				goods: {},
				locaLang: uni.getLocale(),
				configs: {
					condition: "",
					checkLocation: true,
					loadmore: false,
					loading: false,
					withTitle: false,
					headerUnderLine: false,
					hasCart: true,
					headerTitle: "",
					waterfall: true, //2022-04-28是否瀑布流展示
					bgClassName: "none",
					itemClassName: "none",
					imageClassName: "none",
					style: "", //style-gride,style-padding
					image_size: "260x260",
					page_size: 20,
					scrollY: false,
					showMiaosha: false,
				},
			}
		},
		props: {
			// config: {
			// 	type: Object,
			// 	default: () => {
			// 		return {
			// 			condition: "",
			// 			checkLocation: true,
			// 			loadmore: false,
			// 			loading: false,
			// 			withTitle: false,
			// 			headerUnderLine: false,
			// 			hasCart: true,
			// 			headerTitle: "",
			// 			waterfall: true, //2022-04-28是否瀑布流展示
			// 			bgClassName: "none",
			// 			itemClassName: "none",
			// 			imageClassName: "none",
			// 			style: "", //style-gride,style-padding
			// 			image_size: "260x260",
			// 			page_size: '20',
			// 			scrollY: false,
			// 			showMiaosha: false,
			// 			locaLang:''
			// 		}
			// 	}
			// },
			condition: {
				type: String,
				default: ""
			},
			withSku: {
				type: Boolean,
				default: true
			},
			refresh: {
				type: Number,
				default: 0
			},
			loadmore: {
				type: Number,
				default: 0
			}
		},
		computed: {

			where() {
				let conditions = ["is_on_sale==true"];
				if (this.configs && this.configs.condition) {
					conditions.push(`(${this.configs.condition})`)
				}
				if (this.condition) {
					conditions.push(`(${this.condition})`)
				}
				return conditions.join(" && ")
			},
			orderby() {
				if (this.configs && this.configs.order) {
					return this.configs.order;
				}
				return "last_modify_date desc"
			}
		},
		watch: {
			loadmore() {
				this.scrolltolower()
			},
			configs(newVal) {
				console.log("goods list configs", newVal)
			}
		},
		created() {
			this.locaLang = uni.getLocale()
		},
		mounted() {
			console.log('this.where', this.where);
		},
		methods: {
			test() {
				console.log(this.configs);
			},
			bgClick() {
				if (!this.isItemClick && this.configs.top_url) {
					console.log("bg click")
					this.navTo(this.configs.top_url)
				}
			},
			loadData(data, ended, pagination) {
				console.log("goods list", ended, pagination, data)
				//处理图片尺寸 | thumbImg('80x80')
				data.forEach((item, index) => {
					item.style = "";
					item.hasCart = this.configs.hasCart && !!item.is_real;
					item.hasSaleCount = false;
					let imageSize = this.configs.image_size || '260x260';
					if (this.configs.waterfall && index / 2 < 2 && index % 2 == 0 && pagination.current == 1) {
						//第一页的前2张图片高度要高一些 ，就能形成错位效果
						let [width, height] = imageSize.split("x");
						imageSize = [width, height * 1 + 40].join("x")
					}
					item.banner_path = this.$thumbImg(item.goods_thumb, imageSize)
					if (this.configs.style == "style-big-image") {
						if (item.goods_banner && item.goods_banner.path) {
							let banner = item.goods_banner;
							if (imageSize) {
								let [width] = imageSize.split("x");
								//等宽缩放
								let height = parseInt(banner.image.height * width / banner.image.width);
								item.style = `width:${width}rpx;height:${height}rpx;`;
								item.banner_path = this.$thumbImg(banner.path, `${width}x${height}`);
							} else {
								//不做裁剪
								item.banner_path = banner.path;
								item.style = `width:${banner.image.width}rpx;height:${banner.image.height}rpx;`;
							}
						}
						if (!item.is_real) {
							item.hasSaleCount = true;
						}
					} else {
						//最多30个字
						let [width, height] = imageSize.split("x");
						item.style = `width:${width}rpx;height:${height}rpx;`;
						item.name = item.name ? item.name.substr(0, 60) : "";
					}
					item.imageSize = imageSize;
				})

				// console.log("goods loadData", data)
				if (this.configs.background_img) {
					// console.log("this.configs.background_img", this.configs.background_img)
					this.bgStyle =
						`background-image:url(${this.configs.background_img}) ; background-repeat: no-repeat;    background-size: 100%;`
				}

			},
			scrolltolower() {
				console.log("goods scrolltolower")
				//查询下一页
				if (this.configs.loadmore) {
					this.$refs.udb.loadMore()
				}
			},
			loadMoreData() {
				console.log("goods loadmore")
				this.$refs.udb.loadMore()
			},
			navToDetail(item) {
				// this.navTo("/pages/product/car-detail?id=" + item._id, item)
				// console.log(item);
				uni.navigateTo({
					url: "/pages/product/detail?id=" + item._id + "&tt=1",
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// openSku(item) {
			// 	if (this.withSku) {
			// 		this.goods = item;
			// 		this.$refs.tianSkuPop.open();
			// 	} else {
			// 		this.$emit("click", item)
			// 	}
			// 	this.isItemClick = true;
			// 	setTimeout(() => {
			// 		this.isItemClick = false;
			// 	}, 2000)
			// 	return false;
			// }
		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;
	}

	.goods-list-container {
		background: $uni-bg-color;
		height: 100%;
		// margin-left: $uni-spacing-row-base;//2022-08-25电商首页左右不对称
		// padding-top: 8rpx;
		border-radius: $uni-border-radius-base;

		&.style-padding {
			background: none;
		}

		&.style-gride {
			background: none;
		}

		&.full {
			margin: 0;
			border-radius: 0;
		}
	}

	.goods-list {
		// padding: 10rpx 26rpx 10rpx 16rpx;
		background-color: #eee;

		.desc {
			// display: none;
		}

		.goods {
			margin-bottom: 12rpx;
			padding: 0 0 14rpx;
			display: flex;
			position: relative;
		}

		.goods-image {
			display: inline-block;
			width: 168rpx;
			height: 168rpx;
			border-radius: 12rpx;
		}

		.goods-content {
			flex: 1;
			margin-left: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		.title {
			font-size: 28rpx;
			line-height: 1.1;
			// color: red;
		}

		.miaosha-process {
			.progress-box {
				width: 200rpx;
			}
		}

		&.style-padding {
			background: none;
			margin: $uni-spacing-row-base;
			margin-top: 0;
			padding: 0;

			.goods {
				background: $uni-bg-color;
				margin-bottom: $uni-spacing-row-base;
				padding: $uni-spacing-row-base;
				border-radius: $uni-border-radius-base;
			}
		}

		&.style-gride {
			display: flex;
			flex-wrap: wrap;
			// padding: 0 $uni-spacing-row-base;
			// margin-top: $uni-spacing-row-base;

			.goods {
				background: $uni-bg-color;
				width: calc(50% - 14rpx);
				padding: 0 0 $uni-spacing-row-base;
				display: block;
				overflow: hidden;
				border-radius: $uni-border-radius-lg;
				margin-bottom: $uni-spacing-row-base;

				.goods-content {
					margin: 0 $uni-spacing-row-base;
				}

				.goods-image {
					width: 100%;
					height: 350rpx;
					border-radius: 12rpx 12rpx 0 0;

				}

				&:nth-child(2n) {
					margin-left: 24rpx;
				}
			}
		}

		&.style-big-image {
			padding: 0;

			.desc {
				display: block;
			}

			.goods {
				padding: 0;
				display: block;
				background: #FFFFFF;
				margin-bottom: 22rpx;
				border-radius: 22rpx;
				padding-bottom: 16rpx;

				.title {
					font-size: 34rpx;
					font-weight: 500;
				}

				.goods-image {
					width: 100%;
					height: 300rpx;
					margin: 0 auto;
					display: block;
					border-radius: 22rpx 22rpx 0 0;
				}

				.goods-content {
					margin-top: 16rpx;
					// margin-right: 24rpx;
				}
			}
		}

		&.waterfall {
			display: flex;

			.left {
				width: calc(50% - 8px);
			}

			.right {
				width: calc(50% - 8px);
				margin-left: 24rpx;

			}

			.goods-image {
				width: 100% !important;
			}

			.under-line {
				display: flex;
				flex-direction: column;
				background-color: #fff;
				margin: 10rpx 0;
				border-radius: 10rpx;
			}

			.product-content {
				margin: 16rpx 0;
				padding-left: 20rpx;
			}

			.under-line::after {
				display: none;
			}

			.goods {
				width: 100%;

				&:nth-child(2n) {
					margin-left: 0rpx;
				}
			}
		}
	}
</style>